import React from 'react';
import * as PropTypes from 'prop-types';
import classNames from 'classnames'
import {ErrorMessage} from '../Validation'
import {observer} from 'mobx-react'
import {InputBase} from './InputBase'

@observer
export class Input extends InputBase {

    static propTypes = {
        type: PropTypes.string,
        addonBefore: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
        addonAfter: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
    }

    renderAddon = (addon) => {
        if (!addon) {
            return null
        }
        return <span className="input-addon">{addon}</span>
    }

    renderInput = (input, addonBefore, addonAfter) => {
        if (addonBefore || addonAfter) {
            return (
                <span className="input-with-addons">
					{this.renderAddon(addonBefore)}
                    {input}
                    {this.renderAddon(addonAfter)}
				</span>
            )
        }
        return input
    }

    render() {
        const {
            showErrors,
            type,
            title,
            //name,
            maxLength,
            addonBefore,
            addonAfter,
            disabled,
            readOnly,
            className
        } = this.props
        const {invalid, value, validated, errors} = this.store

        return <div className={classNames('input', {'has-errors': invalid, 'has-validated': validated}, className)}>
            {this.renderInput(<input type={type}
                                     title={title}
                                     maxLength={maxLength}
                                     value={value}
                                     readOnly={readOnly}
                                     disabled={disabled}
                                     onChange={this.onChange}
                                     onBlur={this.onBlur}
                                     onKeyDown={this.onKeyDown}/>, addonBefore, addonAfter)}
            <ErrorMessage showErrors={showErrors} invalid={invalid} errors={errors}/>
        </div>

    }
}


